import React, { useEffect } from "react";
import { addCar } from "../../app/car/carSlice";
import { fetchHomeData } from "../../app/home/homeSlice";
import { useAppDispatch, useAppSelector } from "../../app/hooks";

const Index = () => {
  const data = useAppSelector((state) => state.home.data);
  const loading = useAppSelector((state) => state.home.loading);
  const dispatch = useAppDispatch();

  useEffect(() => {
    dispatch(fetchHomeData());
  }, []);
  if (loading) {
    return <div>数据加载中....</div>;
  }

  return (
    <div>
      {data.map((v) => {
        return (
          <dl key={v.id}>
            <dt>
              <img src={v.url} alt="" />
            </dt>
            <dd>
              <h3>{v.title}</h3>
              <p>{v.desc}</p>
							<button onClick={() => dispatch(addCar(v))}>加入购物车</button>
            </dd>
          </dl>
        );
      })}
    </div>
  );
};

export default Index;
